<ng-template #emptycart>
  <div class="d-flex justify-content-center" *ngIf="isLoading; else noData">
    <mat-spinner></mat-spinner>
  </div>
  <ng-template #noData>
    <mat-card>
      <mat-card-header>
        <mat-card-title class="mat-h1"
          >Your shopping cart is empty.</mat-card-title
        >
      </mat-card-header>
      <mat-card-content>
        <button
          mat-raised-button
          color="primary"
          [routerLink]="['/']"
          class="mt-2"
        >
          Continue shopping
        </button>
      </mat-card-content>
    </mat-card>
  </ng-template>
</ng-template>

<mat-card class="my-4">
  <mat-card-header
    class="mat-elevation-z2 custom-card-header justify-content-between"
  >
    <mat-card-title class="mat-h1"> Shopping cart </mat-card-title>
    <div *ngIf="cartItems?.length > 0">
      <button class="mat-elevation-z4" mat-raised-button (click)="clearCart()">
        Clear cart
      </button>
    </div>
  </mat-card-header>
  <ng-container *ngIf="cartItems?.length > 0; else emptycart">
    <mat-card-content class="my-3">
      <table mat-table [dataSource]="cartItems" class="mat-elevation-z2">
        <ng-container matColumnDef="image">
          <th mat-header-cell *matHeaderCellDef>Image</th>
          <td mat-cell *matCellDef="let item">
            <img
              class="my-2"
              matTooltip="{{ item.book.title }}"
              matTooltipPosition="after"
              src="/Upload/{{ item.book.coverFileName }}"
            />
          </td>
        </ng-container>

        <ng-container matColumnDef="title">
          <th mat-header-cell *matHeaderCellDef>Title</th>
          <td mat-cell *matCellDef="let item">
            <a [routerLink]="['/books/details/', item.book.bookId]">{{
              item.book.title
            }}</a>
          </td>
        </ng-container>

        <ng-container matColumnDef="price">
          <th mat-header-cell *matHeaderCellDef>Price</th>
          <td mat-cell *matCellDef="let item">
            {{ item.book.price | currency : "INR" }}
          </td>
        </ng-container>

        <ng-container matColumnDef="quantity">
          <th mat-header-cell *matHeaderCellDef>Quantity</th>
          <td mat-cell *matCellDef="let item">
            <div class="d-flex align-items-center">
              <div>
                <button
                  mat-icon-button
                  color="warn"
                  [disabled]="item.quantity < 2 ? true : false"
                  (click)="deleteOneCartItem(item.book.bookId)"
                >
                  <mat-icon>remove_circle</mat-icon>
                </button>
              </div>
              <div>{{ item.quantity }}</div>
              <div>
                <button
                  mat-icon-button
                  color="warn"
                  (click)="addToCart(item.book.bookId)"
                >
                  <mat-icon>add_circle</mat-icon>
                </button>
              </div>
            </div>
          </td>
        </ng-container>

        <ng-container matColumnDef="total">
          <th mat-header-cell *matHeaderCellDef>Total</th>
          <td mat-cell *matCellDef="let item">
            {{ item.book.price * item.quantity | currency : "INR" }}
          </td>
        </ng-container>

        <ng-container matColumnDef="action">
          <th mat-header-cell *matHeaderCellDef>Action</th>
          <td mat-cell *matCellDef="let item">
            <button
              mat-icon-button
              color="accent"
              matTooltip="Delete item"
              (click)="deleteCartItem(item.book.bookId)"
            >
              <mat-icon>delete</mat-icon>
            </button>
          </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
      </table>
    </mat-card-content>
    <mat-card-content>
      <ng-container matColumnDef="action">
        <td mat-cell></td>
        <td mat-cell></td>
        <td mat-cell></td>
        <td mat-cell><strong>Cart Total:</strong></td>
        <td mat-cell>
          <strong>{{ totalPrice | currency : "INR" }}</strong>
        </td>
        <td mat-cell>
          <button
            class="my-2"
            mat-raised-button
            color="warn"
            [routerLink]="['/checkout']"
          >
            CheckOut
          </button>
        </td>
      </ng-container>
    </mat-card-content>
  </ng-container>
</mat-card>
